<template>
  <div>
    <a-drawer
      title="支出详情"
      width="1100"
      :maskClosable="false"
      :visible="detailData.show"
      direction="rtl"
      @close="handleClose"
    >
      <div slot="title">
          <span>收款详情</span>
        </div>
      <el-row style="width:1120px;padding-bottom:280px;height:100%;overflow-y:auto">
        <el-col :span="18">
          <el-form
            :model="parames"
            status-icon
            label-position="left"
            ref="parames"
            label-width="94px"
            class="detailForm"
          >
            <el-row style="padding: 0 40px">
                  <el-col :span="24" style="margin-top:15px">
                    <p class="formtitle" style="color:#000;">基本信息</p>
                  </el-col>
                  <!-- <el-col :span="12">
                    <el-form-item label="状态:">
                      <p v-if="parames.expenditureStatus">{{parames.expenditureStatus.desc}}</p>
                    </el-form-item>
                  </el-col> -->
                  <el-col :span="12">
                    <el-form-item label="支出科目:" prop="phone">
                      <p>{{parames.causeSubject}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="收款人姓名:" prop="name">
                      <p>{{parames.payeeName}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="收款账号:" prop="name">
                      <p v-if="parames.receiptAccountType">{{parames.receiptAccountType.desc}}:{{parames.receiptAccount}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="收款编号:" prop="phone">
                      <p>{{parames.receiptNumber}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开户银行:" prop="phone">
                      <p>{{parames.depositBank}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="备注信息:" prop="phone">
                      <p>{{parames.remark}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="支出附件:" prop="phone">
                      <span style="cursor:pointer;color:#409efe"  v-for="(item,index) in parames.attachmentSet" :key="index">
                        <span style="margin-right:10px;" v-if="!item.imgType" @click="handleDownFile(item)">{{item.name}}</span>
                        <span v-if="item.imgType" style="margin-right:10px;" @click="handleView(item)">{{item.name}}(点击预览)</span>
                      </span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <p style="margin-top: 20px;color:#000" class="formtitle">支出明细</p>
                  </el-col>
                  <el-col :span="24">
                    <el-table :data="parames.expenditureDetailList" style="width: 100%">
                      <!-- <el-table-column prop="productName" label="客户名称"></el-table-column> -->
                      <el-table-column prop="contractId" label="合同流水号"></el-table-column>
                      <el-table-column prop="productName" label="产品名称"></el-table-column>
                      <!-- <el-table-column prop="address" label="服务金额"></el-table-column> -->
                      <el-table-column prop="receiptedAmount" label="实收金额"></el-table-column>
                      <el-table-column prop="expendableAmount" label="可支出金额"></el-table-column>
                      <!-- <el-table-column prop="address" label="申请金额"></el-table-column> -->
                      <!-- <el-table-column prop="address" label="操作"></el-table-column> -->
                    </el-table>
                  </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
          <div class="form-team-box">
            <div style="margin-bottom: 20px">
              <el-button
                size="small"
                icon="el-icon-edit"
                @click="handleEdit"
                style="width:200px;text-align: left;margin-bottom:10px"
              >修改内容</el-button>
              <el-button
                size="small"
                icon="el-icon-delete"
                @click="handleDel"
                style="width:200px;text-align: left;margin-bottom:10px;margin-left:0"
              >删除记录</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </a-drawer>
    <createdDialog :dialogData="dialogData" @checkOpen="checkOpen"></createdDialog>
      <imgBox :imgData="imgData"></imgBox>

  </div>
</template>

<script>
import createdDialog from './addExpenditure.vue'  //新建-修改

export default {
  props: ["detailData"],
  data() {
    return {
      loading: false,
      parames: {},
      dialogData: { //新建弹窗
        type: '',
        id: '',
        show: false,
      },
      imgData: {
        name: '',
        url: '',
        show: false,
      },
      tableData: []
    };
  },
  mounted() {},
  methods: {
    handleClose() {
      //关闭弹窗
      this.detailData.show = false;
    },
    handleDel () { //删除记录
      this.$post(this.$api.postFinanceExpenditureDel,{ //根据id获取详情数据
        expenditureRecordId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.handleClose()
          this.$emit('checkRender')
        }
      })
    },
    handleView (item) { //预览图片
      this.imgData.name = item.name
      this.imgData.url = item.url
      this.imgData.show = true
    },
    handleDownFile (row) { //附件下载
      window.location.href = this.$api.postFinanceExpenditureAttachmentDownload+'?name=' + row.name + '&url=' + row.url
    },
    handleEdit () { //修改
      this.dialogData.id = this.detailData.id
      this.dialogData.type = 'edit'
      this.dialogData.show = true
      this.handleClose()
    },
    checkOpen (type) { //重新打开并向上刷新列表数据
      this.detailData.show = true
      if (type == '1') { //是点击了修改保存按钮-需刷新列表数据
        setTimeout(() => {
          this.$emit('checkRender')
        }, 200);
      }
    },
    render () {
      this.loading = true
      this.$post(this.$api.postFinanceExpenditureFind,{ //根据id获取详情商机数据
        expenditureRecordId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.parames = response.data.data
          this.parames.attachmentSet.forEach(el=>{
            el.imgType = this.$utils.getFileType(el.url)
          })
          setTimeout(() => {
            this.loading = false
          }, 200);
        }
      })
    },
  },
  components: {
    createdDialog
  },
  computed: { //计算属性
    changeDialog () {
      return this.detailData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.render()
        } else {
          
        }
      }
    },
    deep: true
  }
};
</script>

<style scoped>
</style>
